<template>
	<div id="map"></div>
</template>

<script>
	import { reactive, onMounted } from 'vue'
	import 'ol/ol.css'
	import { Map, View } from 'ol'
	import { Tile } from 'ol/layer'
	import { XYZ } from 'ol/source'
	import { fromLonLat } from 'ol/proj'

	export default {
		name: 'use-XYZ-create-map',
		setup() {
			let map = reactive({})

			const initMap = () => {
				map = new Map({
					target: 'map', //地图容器div层的ID
					layers: [
						// 加载瓦片图层数据
						// 底图
						new Tile({
							title: '天地图矢量图层',
							source: new XYZ({
								url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=40e50cca6823476482e8721bb2eee900',
								attributions: '天地图的属性描述',
								wrapX: true
							})
						}),
						// 注记
						new Tile({
							title: '天地图矢量注记图层',
							source: new XYZ({
								url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=40e50cca6823476482e8721bb2eee900',
								attributions: '天地图的属性描述',
								wrapX: true
							})
						})
					],
					// 地图视图设置View层
					view: new View({
						center: fromLonLat([132.5, 22.2]), //中心点
						zoom: 4,
						projection: 'EPSG:3857'
					})
				})
			}
			onMounted(() => {
				initMap()
			})
			return {
				map,
				initMap
			}
		}
	}
</script>

<style>
	#map {
		width: 100%;
		height: 100%;
	}
</style>
